<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        max-width: 100%;
        /* 响应式   图片自适应宽度*/
      }
    </style>
  </head>
  <body>
    <img src="./logo.png" alt="logo" />
    <hr />
    <img id="xxx" src="./logo1.png" alt="logo" />
    <!-- 控制台检测图片加载是否成功 -->
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "./logo.png"; //图片加载失败后打开这个补救图片
      };
    </script>
  </body>
</html>
